
<template>
<div>
  <div style="text-align: right;">
  <el-button type="primary" @click="insert()">添加房产</el-button>
  </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="community.name"
        label="名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="community.address"
        label="地址"
        width="120">
      </el-table-column>
      <el-table-column
        prop="community.helpPhone"
        label="管家电话"
        width="120">
      </el-table-column>
      <el-table-column
        prop="houseNumber"
        label="门牌号">
      </el-table-column>

      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
        <el-tag effect="dark"  v-if="scope.row.status == 0">未认证</el-tag>
        <el-tag effect="dark" type="warning" v-if="scope.row.status == 1">已认证</el-tag>
        <el-tag effect="dark" type="danger" v-if="scope.row.status == 2">已拒绝</el-tag>
        </template>
      </el-table-column>

      <el-table-column
      label="操作"
      align="center">

      <template slot-scope="scope">
        <el-button v-if="scope.row.status == 1" type="success" size="mini" @click="info(scope)">查看详情</el-button>
        <el-button v-if="scope.row.status == 0" type="success" size="mini" @click="info(scope)">查看详情</el-button>
        <el-button v-if="scope.row.status == 2" type="success" size="mini" @click="xiugai(scope)">重新提交</el-button>
      </template>

    </el-table-column>
    </el-table>
    <!-- 查看详情对话框 -->
    <el-dialog
    title="详情"
    :visible.sync="dialogVisible"
    width="50%"
    >
    <detail :current="current" @close="close"></detail>
    </el-dialog>

    <!-- 添加框 -->
    <el-dialog
    title="添加"
    :visible.sync="insertVisible"
    width="40%"
    >
    <addhousing @closeInsert="closeInsert" :current="current" @insertadd="insertadd" :xiaoqus="xiaoqus"></addhousing> 
    </el-dialog>

    <!-- 重新提交框 -->
    <el-dialog
    title="重新提交"
    :visible.sync="newVisible"
    width="50%"
    >
    <div>
      <el-form ref="form" :model="current" label-width="100px">
  
  <el-form-item label="选择小区" style="width:100%">
    <el-select v-model="current.cid" placeholder="请选择小区" style=" width: 300px;">
      <el-option
              v-for="(xiaoqu,index) in xiaoqus"
              :key="index"
              :label="xiaoqu.name"
              :value="xiaoqu.id"
              >
            </el-option>
    </el-select>
  </el-form-item>

  

  <el-form-item label="门牌格式">
    <el-input
        placeholder="1栋1单元101"
  
        :disabled="true"
        style=" width: 300px;">
        </el-input>
    </el-form-item>

  <el-form-item label="您的门牌号">
    <el-input type="input" v-model="current.houseNumber" style=" width: 300px;"></el-input>
  </el-form-item>
  
  <br>

  <el-form-item>
    <el-button type="primary" @click="change">立即修改</el-button>
    <el-button @click="close()">取消</el-button>
  </el-form-item>
</el-form>
    </div>
    </el-dialog>

    </div>
  </template>

  <script>
  import detail from './detail.vue';
  import addhousing from './addhousing.vue';
    export default {
      data() {
        return {
          tableData: [],
          dialogVisible:false,
          insertVisible:false,
          newVisible:false,
          current:{
            name:""

          },
          xiaoqus:[],
          xiaoqu:{
            name:""
          }
      
        }
      },
      methods: {
        info:function(scope){
         this.current=scope.row
         this.dialogVisible=true
      },
      close:function(){
        
        this.dialogVisible = false
        this.updateVisible = false
        this.newVisible = false
      },
      insert:function(){
          this.insertVisible=true;
          this.$axios.get("http://localhost:8080/community/findAllCommunity",this.current).then(res => {
              this.xiaoqus = res.data.data
        })
      },
      insertadd:function(){
          
          //先发送请求将后台数据库改了，改成功更新前端
           this.$axios.post("http://localhost:8080/housing/addHousing",this.current).then(res => {

                this.current.community=res.data.data
                 
                this.current.status=0

                this.tableData.push(this.current)
                this.insertVisible = false
           })
      },
      // 重新提交
      xiugai:function(scope){
        this.current = scope.row
        this.newVisible = true
        this.$axios.get("http://localhost:8080/community/findAllCommunity",this.current).then(res => {
              this.xiaoqus = res.data.data
        })
      },
      change:function(){
        //先发送请求将后台数据库改了，改成功更新前端
           this.$axios.put("http://localhost:8080/housing/changeHousing",this.current).then(res => {

                this.current.community=res.data.data
                 this.current.status = 0
                this.newVisible = false
           })
      },
      closeInsert:function(){
          this.current = {}
          this.insertVisible = false
        },

      },
      components:{
        detail,
        addhousing
      },
      mounted(){
        this.$axios.get("http://localhost:8080/housing/findByUid").then(res => {
          this.tableData = res.data.data
        })
        
      }
      
    }
  </script>